import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  Breadcrumb,
  Container,
  Pagination,
  Table
} from 'react-bootstrap';
import classNames from 'classnames';
import queryString from 'query-string'; 

import {
  TaskStatus,
  URL,
  TASKDETAIL_FROM
} from '../../config';
import {
  function_get_lineed_task
} from '../../actions/task';

class App extends Component {
  state = {
    page: queryString.parse(this.props.location.search).page,
    total: 0
  }

  componentDidMount(){
    function_get_lineed_task(this.state.page, this.props.dispatch, (page, total)=>this.setState({page, total}));
  }

  render () {
    return (
      <Container>
        <Breadcrumb>
          <Breadcrumb.Item href={URL.main_page}>主页</Breadcrumb.Item>
          <Breadcrumb.Item active>已上线列表</Breadcrumb.Item>
        </Breadcrumb>
        <Table bordered hover size="sm">
          <thead>
            <tr>
              <th>ID</th>
              <th>上线单</th>
              <th>项目</th>
              <th>用户名</th>
              <th>更新时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          {this.props.list.map(item => {
            return (
              <tr key={item.taskId}>
                <td>{item.taskId}</td>
                <td>{item.title}</td>
                <td>{item.projectName}</td>
                <td>{item.developer_nick}</td>
                <td>{item.time}</td>
                <td>
                  {item.status === TaskStatus.DEPLOYING ? <i className={classNames("status", "text-warning")}>上线中</i> : null}
                  {item.status === TaskStatus.DEPLOY_SUCCESS ? <i className={classNames("status", "text-success")}>已上线</i> : null}
                  {item.status === TaskStatus.DEPLOY_FAILED ? <i className={classNames("status", "text-danger")}>上线失败</i> : null}
                </td>
                <td>
                  <Link to={URL.taskdetail_page + "?pid=" + item.projectId + "&tid=" + item.taskId + "&from=" + TASKDETAIL_FROM.DEPLOYING}>详情</Link>
                </td>
              </tr>
            )
          })}
          </tbody>
        </Table>
        <Pagination size="lg">
            <Pagination.First href={URL.deploying_page + "?page=1"} title="首页" />
            <Pagination.Prev href={URL.deploying_page + "?page=" + (this.state.page - 1)} title="上一页" disabled={this.state.page <= 1} />
            <Pagination.Next href={URL.deploying_page + "?page=" + (this.state.page + 1)} title="下一页" disabled={this.state.page >= this.state.total} />
            <Pagination.Last href={URL.deploying_page + "?page=" + (this.state.total)} title="最后一页" />
        </Pagination>
      </Container>
    )
  }    
}

function mapStateToProps (state) {
  return {
      list: state.tasks.linedTasks,
      myuid: state.account.uid,
  }
}

export default connect(mapStateToProps)(App);